<template>
  <div class="index">
    <!-- 头部样式 -->
    <div class="header">
      <van-nav-bar :fixed="true" :placeholder="true" :border="false">
        <template #left>
          <span class="title_area" @click="goCity">{{ cityname }}</span>
          <van-search
            v-model="value"
            placeholder="找医生、找医院"
            background="transparent"
            shape="round"
            left-icon="https://z3.ax1x.com/2021/07/16/WMXpwT.png"
          />
        </template>
        <template #right>
          <van-icon name="https://z3.ax1x.com/2021/07/16/WMH84s.png" badge="" />
        </template>
      </van-nav-bar>
    </div>
    <!-- 挂号-问专家-专科频道 -->
    <div class="fist_nav">
      <router-view />
      <van-grid :border="false" :column-num="3" :router="true">
        <van-grid-item v-for="(item, i) in fistNav" :key="i" :to="item.url">
          <van-image :src="item.imgurl" />
          <div class="big_title">{{ item.bigtitle }}</div>
          <span class="small_title">{{ item.smalltitle }}</span>
        </van-grid-item>
      </van-grid>
    </div>
    <!--义诊-购药-名医-极速-疫苗  -->
    <div class="second_nav">
      <router-view />
      <van-grid :border="false" :column-num="5" :router="true">
        <van-grid-item v-for="(item, i) in senNav" :key="i" :to="item.url">
          <van-image :src="item.imgurl" />
          <div class="sen_title">{{ item.title }}</div>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 三个图片 -->
    <div class="img_box">
      <img src="https://z3.ax1x.com/2021/07/17/WlrcGQ.png" />
      <img src="https://z3.ax1x.com/2021/07/17/Wlr6Pg.png" />
      <img src="https://z3.ax1x.com/2021/07/17/WlrsIS.png" class="img_padd" />
    </div>
    <div class="nav_list">
      <!-- 我的医生 -->
      <div class="mydoctor">
        <h2 class="main_head">
          我的医生
          <span class="doctor_title"> 找一找我看过的医生，关注Ta</span>
        </h2>
        <div class="wrap">
          <van-grid :border="false">
            <van-grid-item v-for="item in state.doctorinfo" :key="item._id">
              <div class="doctor_info">
                <div class="doctor_img">
                  <img :src="item.imgurl" />
                </div>
                <div class="doctor_message">
                  <h2 class="doctor_name">
                    {{ item.name }}
                    <span class="doctor_profession">{{ item.dications }}</span>
                  </h2>
                  <p class="doctor_instruction">
                    {{ item.belongto }}
                  </p>
                </div>
                <div class="love_img">
                  <img src="https://z3.ax1x.com/2021/07/17/Wl760O.png" />
                </div>
              </div>
              <div class="doctor_oder">
                <div class="give_love">本地名医</div>
                <div class="good_oder">回复快 好评</div>
              </div>
            </van-grid-item>
          </van-grid>
        </div>
      </div>
      <!-- 专科服务 -->
      <div class="special_sevice">
        <van-grid :border="false">
          <h2 class="main_head">
            专科服务
            <span class="doctor_title"
              >以服务
              <i class="person_count">30792929</i>
              人
              <i class="person_prece">98.5%</i>
              满意
            </span>
          </h2>
          <van-grid-item v-for="(item, index) in special" :key="index">
            <van-image :src="item.url" />
            <div class="special_info">{{ item.title }}</div>
          </van-grid-item>
        </van-grid>
      </div>
      <!-- 介绍产品 -->
      <div class="instrInfo">
        <div class="instr_top">
          <van-grid :border="false">
            <van-grid-item>
              <van-image src="https://z3.ax1x.com/2021/07/18/W8ZSrq.png" />
              <div class="instr_title">
                治阳痿补肾专区
                <span>低价抢男性好药</span>
              </div>
            </van-grid-item>
            <van-grid-item>
              <van-image src="https://z3.ax1x.com/2021/07/18/W8Vj2j.png" />
              <div class="instr_title">
                妇科免费咨询
                <span class="instr_color">大牌好药抢购</span>
              </div>
            </van-grid-item>
          </van-grid>
        </div>
        <div class="instr_bottom">
          <van-grid :border="false">
            <van-grid-item v-for="(item, index) in specialbot" :key="index">
              <van-image :src="item.url" />
              <div class="instr_title">
                {{ item.title }}
                <span>{{ item.smalltitle }}</span>
              </div>
            </van-grid-item>
          </van-grid>
        </div>
      </div>
      <!-- 微脉精选 -->
      <div class="weimai_select">
        <h2 class="main_head">
          微脉精选
          <span class="more">更多</span>
        </h2>
        <van-grid :border="false">
          <!-- <van-grid-item> -->
          <!-- <div class="wrap"> -->
          <ul>
            <li v-for="item in state.healshopbarginlist" :key="item._id">
              <van-image :src="item.imgurl" />
              <p class="pro_title">{{ item.title }}</p>
              <span class="pro_price">{{ item.newpriceint }}</span>
            </li>
          </ul>
          <!-- </div> -->
          <!-- </van-grid-item> -->
        </van-grid>
      </div>
    </div>
  </div>
</template>
<script>
import { onMounted, reactive, computed, nextTick } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import BetterScroll from "better-scroll";
export default {
  setup() {
    const fistNav = [
      {
        bigtitle: "去挂号",
        smalltitle: "专家预约",
        imgurl: "https://z3.ax1x.com/2021/07/17/WQL8YQ.png",
        url: "/list",
      },
      {
        bigtitle: "问专家",
        smalltitle: "线上门诊",
        imgurl: "https://z3.ax1x.com/2021/07/17/WQLGWj.png",
        url: "/online",
      },
      {
        bigtitle: "专科频道",
        smalltitle: "特色专区",
        imgurl: "https://z3.ax1x.com/2021/07/17/WQLYSs.png",
        url: "/channel",
      },
    ];
    const senNav = [
      {
        title: "1元义诊",
        imgurl: "https://z3.ax1x.com/2021/07/17/WlYgne.png",
        url: "/zhuanjia",
      },
      {
        title: "在家购药",
        imgurl: "https://z3.ax1x.com/2021/07/17/WlY20H.png",
        url: "/athome",
      },
      {
        title: "名医诊室",
        imgurl: "https://z3.ax1x.com/2021/07/17/WlYs1K.png",
        url: "/studio",
      },
      {
        title: "极速咨询",
        imgurl: "https://z3.ax1x.com/2021/07/17/WlY6XD.png",
        url: "/quick",
      },
      {
        title: "疫苗预约",
        imgurl: "https://z3.ax1x.com/2021/07/17/WlYy6O.png",
      },
    ];
    const special = [
      {
        title: "男科义诊",
        url: "https://z3.ax1x.com/2021/07/18/W3zSDH.png",
      },
      {
        title: "中医义诊",
        url: "https://z3.ax1x.com/2021/07/18/W3xvvD.png",
      },
      {
        title: "内科",
        url: "https://z3.ax1x.com/2021/07/18/W3xOC6.png",
      },
      {
        title: "0元护肤",
        url: "https://z3.ax1x.com/2021/07/18/W3zpbd.png",
      },
      {
        title: "消化科",
        url: "https://z3.ax1x.com/2021/07/18/W3xq4x.png",
      },
      {
        title: "孕产专科",
        url: "https://z3.ax1x.com/2021/07/18/W3xX8K.png",
      },
      {
        title: "妇科健康",
        url: "https://z3.ax1x.com/2021/07/18/W3xjgO.png",
      },
      {
        title: "宝宝健康",
        url: "https://z3.ax1x.com/2021/07/18/W3xzKe.png",
      },
    ];
    const specialbot = [
      {
        title: "国医圣手",
        smalltitle: "孙秦和妇科圣手",
        url: "https://z3.ax1x.com/2021/07/18/W8MYQg.png",
      },
      {
        title: "慢病购药专区",
        smalltitle: "高血压高血脂",
        url: "https://z3.ax1x.com/2021/07/18/W8MYQg.png",
      },
      {
        title: "改善亚健康",
        smalltitle: "科学减脂",
        url: "https://z3.ax1x.com/2021/07/18/W8MJSS.png",
      },
      {
        title: "妈咪好孕",
        smalltitle: "孕产一站式服务",
        url: "https://z3.ax1x.com/2021/07/18/W8M8W8.png",
      },
      {
        title: "医护上门",
        smalltitle: "在线预约医护到家",
        url: "https://z3.ax1x.com/2021/07/18/W8MtyQ.png",
      },
      {
        title: "女性关爱",
        smalltitle: "守护女性健康",
        url: "https://z3.ax1x.com/2021/07/18/W8M3Jf.png",
      },
    ];
    const router = useRouter();
    const goCity = () => {
      router.push("/aduss");
    };
    const cityname = computed(() => store.state.cityname);
    const store = useStore();
    const state = reactive({
      doctorinfo: computed(() => store.state.doctorinfo),
      healshopbarginlist: computed(() => store.state.healshopbarginlist),
    });
    const getdoctor = async () => {
      await store.dispatch("changeDoctorInfoAsync");
      nextTick(() => {
        new BetterScroll(".wrap", {
          scrollX: true,
          scrollY: false,
          click: true,
        });
      });
    };
    const getweimo = async () => {
      await store.dispatch("changehealshopAsync");
      nextTick(() => {
        new BetterScroll(".weimai_select .van-grid", {
          scrollX: true,
          scrollY: false,
          click: true,
        });
      });
      // console.log(bs);
    };
    onMounted(() => {
      getweimo();
      getdoctor();
    });
    return {
      fistNav,
      senNav,
      special,
      specialbot,
      goCity,
      state,
      getweimo,
      getdoctor,
      cityname,
    };
  },
};
</script>
<style lang="less" scoped>
.index {
  position: relative;
  background: #fff;
  :deep(.header) {
    .van-nav-bar {
      padding: 8px 0;
    }
    .van-nav-bar__left {
      .title_area {
        height: 19px;
        line-height: 19px;
        font-size: 18px;
        font-weight: 900;
        color: #333333;
        &::after {
          content: "";
          display: inline-block;
          margin-left: 5px;
          width: 0px;
          height: 0px;
          border: 4px solid transparent;
          border-top: 4px solid #000;
        }
      }
      .van-field__left-icon {
        width: 22px;
        height: 22px;
        padding: 2px 0;
        .van-icon__image {
          width: 100%;
          height: 100%;
        }
      }
      .van-search {
        width: 69%;
      }
    }
    .van-nav-bar__right {
      margin-bottom: 4px;
      .van-icon {
        width: 30px;
        height: 26px;
        .van-icon__image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  // first_nav的css样式
  :deep(.fist_nav) {
    padding: 12px 16px 0;
    .van-image {
      width: 39px;
      height: 39px;
    }
    .big_title {
      height: 36px;
      line-height: 36px;
      font-size: 17px;
      font-weight: 500;
      color: #333333;
    }
    .small_title {
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #999999;
    }
  }
  // 义诊-购药-名医-极速-疫苗样式
  :deep(.second_nav) {
    padding: 0 16px;
    .van-image {
      width: 45px;
      height: 38px;
    }
    .sen_title {
      height: 22px;
      line-height: 22px;
      font-size: 13px;
      color: #999999;
    }
  }
  .img_box {
    width: 100%;
    img {
      width: 100%;
    }
    .img_padd {
      padding: 0 16px 33px;
    }
  }
  // 我的医生样式
  :deep(.mydoctor) {
    padding: 0 16px;
    .main_head {
      width: 100%;
      height: 40px;
      font-size: 24px;
      font-weight: 600;
      color: #000000;
      line-height: 36px;
      .doctor_title {
        height: 14px;
        font-size: 15px;
        font-weight: 500;
        color: #999ea7;
        line-height: 36px;
      }
    }
    .wrap {
      width: 100%;
      height: 134px;
      overflow: hidden;
    }
    .van-grid {
      display: inline-flex;
      flex-wrap: nowrap;
    }
    .van-grid-item {
      flex-basis: 88% !important;
      height: 111px;
      // border: 1px solid red;
      margin: 10px 20px 0 0;
    }
    .van-grid-item__content {
      width: 100%;
      padding: 0;
      margin-right: 10px;
    }
    .doctor_info {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      font-weight: 500;
      .doctor_img {
        width: 50px;
        height: 50px;
        border-radius: 100%;
        overflow: hidden;
        text-align: center;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .doctor_message {
      margin-left: 5px;
      font-size: 18px;
      color: #333333;
      .doctor_profession {
        font-size: 14px;
        color: #6f7277;
      }
      .doctor_instruction {
        font-size: 14px;
        padding-top: 14px;
        color: #6f7277;
        white-space: nowrap;
      }
    }
    .love_img {
      width: 18px;
      margin-left: 35px;
      img {
        width: 100%;
      }
    }
    .doctor_oder {
      width: 100%;
      display: flex;
      font-size: 11px;
      margin-top: 18px;
      .give_love {
        width: 76px;
        height: 24px;
        line-height: 24px;
        font-size: 11px;
        color: #fefefe;
        text-indent: 1.8em;
        background: linear-gradient(to right, #e26d2a, #e58234);
        border-radius: 12px;
        position: relative;
        align-self: start;
        &::before {
          width: 12px;
          height: 12px;
          content: "";
          position: absolute;
          left: 4px;
          transform: translateY(50%);
          background: url(https://z3.ax1x.com/2021/07/18/W3fRsO.png);
          background-size: 100% 100%;
        }
      }
      .good_oder {
        width: 130px;
        height: 24px;
        font-size: 16px;
        color: #e1b78e;
        line-height: 24px;
        margin-left: 10px;
      }
    }
  }
  //专科服务的样式
  :deep(.special_sevice) {
    padding: 10px 16px 0;
    .main_head {
      width: 100%;
      height: 40px;
      font-size: 24px;
      font-weight: 600;
      color: #000000;
      line-height: 36px;
      .doctor_title {
        height: 14px;
        font-size: 11px;
        font-weight: 500;
        color: #151515;
        line-height: 36px;
        i {
          color: #e68547;
        }
      }
    }
    .van-grid-item {
      padding-top: 20px;
    }
    .van-image {
      width: 44px;
      height: 44px;
      img {
        width: 100%;
      }
    }
    .special_info {
      font-size: 14px;
      font-weight: 400;
      color: #333333;
      margin-top: 12px;
    }
  }
  // 介绍服务
  :deep(.instrInfo) {
    padding: 26px 16px 0;
    .instr_top {
      .van-grid-item__content {
        padding-left: 2px;
        position: relative;
      }
      .van-image {
        width: 160px;
        height: 86px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .instr_title {
        position: absolute;
        left: 14px;
        font-size: 14px;
        font-weight: 900;
        span {
          display: block;
          width: 90px;
          height: 16px;
          line-height: 16px;
          text-align: center;
          font-weight: 500;
          font-size: 10px;
          background: #5fbc8b;
          color: #fff;
          border-radius: 8px;
          margin-top: 8px;
        }
        .instr_color {
          width: 80px;
          background: #e95373;
        }
      }
    }
    .instr_bottom {
      .van-grid-item__content {
        padding: 8px 5px 0 0;
        position: relative;
      }
      .van-image {
        width: 106px;
        height: 151px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .instr_title {
        position: absolute;
        top: 20px;
        left: 10px;
        font-size: 16px;
        font-weight: 900;
        span {
          display: block;
          width: 100%;
          height: 16px;
          line-height: 16px;
          text-align: center;
          font-weight: 500;
          font-size: 8px;
          margin-top: 8px;
          color: #9b9790;
        }
      }
    }
  }
  // 微脉精选
  :deep(.weimai_select) {
    padding: 26px 16px 0;
    .main_head {
      width: 96%;
      height: 40px;
      font-size: 24px;
      font-weight: 600;
      color: #000000;
      line-height: 36px;
      display: flex;
      justify-content: space-between;
      .more {
        width: 50px;
        font-size: 15px;
        font-weight: 500;
        color: #999ea7;
        line-height: 36px;
        position: relative;
        &::after {
          content: "";
          width: 18px;
          height: 18px;
          position: absolute;
          right: 0;
          transform: translateY(50%);
          background: url(https://z3.ax1x.com/2021/07/18/W8NDHO.png);
          background-size: 100% 100%;
        }
      }
    }
    .van-grid {
      width: 100%;
      height: 206px;
      flex-wrap: nowrap;
      overflow: hidden;
    }
    ul {
      display: inline-flex;
      height: 200px;
    }
    li {
      flex: 1;
      margin-right: 10px;
      .van-image {
        width: 105px;
        height: 109px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .pro_title {
        width: 100%;
        line-height: 20px;
        font-size: 13px;
        font-weight: 500;
        color: #525252;
        margin-top: 10px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      .pro_price {
        font-size: 14px;
        font-weight: 500;
        color: #de7570;
        margin-right: 10px;
      }
    }
  }
}
</style>
